<template>
	<view class="box">
		<view class="search">
			<u-search @custom="custom" @clickIcon="clickIcon" placeholder="请输入商品" v-model="keyword" :show-action="true" actionText="搜索"></u-search>
		</view>
		<view class="history_search">
			<view class="left">历史搜索</view>
			<view style="margin-bottom: 4%; overflow: hidden;">
				<view @click="clearHistory" class="right">清空记录</view>
				<image @click="clearHistory" class="icon_img right" src="@/static/images/index/delete.svg"></image>
			</view>
			<view @click="clickKeyword(item)" class="history_keys" v-for="(item,index) in historyKeys">
				{{item}}
			</view>
			<view class="no_search" v-if="hidden">暂无搜索记录</view>
		</view>
		<view class="hot_search">
			<view style="margin-bottom: 4%;">热门搜索</view>
			<view @click="clickKeyword(item.searchKeywords)" class="history_keys" v-for="(item,index) in hotKeywords">
				{{item.searchKeywords}}
			</view>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="提示" content="确认删除搜索历史？" @confirm="dialogConfirm"
					></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	//获取热度课程搜索关键字
	import { getHotKeywords } from "@/static/http/getData.js"
	
	export default {
		data() {
			return {
				keyword: '',
				historyKeys: [],
				hotKeywords: [],
				hidden: false,
				msgType: 'info'
			}
		},
		onLoad() {
			this.getHotKeywords();
			var historyKeys = [
					'幻想乡',
					'风见幽香',
					'八云紫',
					'西行寺幽幽子',
					'蓬莱山辉夜',
					'八意永琳',
				];
			//uni.setStorageSync('historyKeys',JSON.stringify(historyKeys));
			var historyKeys = JSON.parse(uni.getStorageSync('historyKeys'));
			if(historyKeys.length == 0){
				this.hidden = true;
			}else{
				this.historyKeys = historyKeys;
			}
		},
		methods: {
			//点击搜索
			custom(){
				if(this.keyword != ''){
					if(this.historyKeys.length == 6){
						//删除最后一个
						this.historyKeys.pop();
						//在最前面添加一个
						if(this.historyKeys.indexOf(this.keyword) == -1)
						this.historyKeys.unshift(this.keyword);
					}else{
						//在最前面添加一个
						if(this.historyKeys.indexOf(this.keyword) == -1)
						this.historyKeys.unshift(this.keyword);
						this.hidden = false;
					}
					uni.setStorageSync('historyKeys',JSON.stringify(this.historyKeys));
					this.keyword = '';
				}else{
					uni.$u.toast('搜索内容不能为空！');
				}
			},
			//点击搜索图标
			clickIcon(){
				uni.$u.toast('点击了左侧图标');
			},
			//清空记录-弹出询问框
			clearHistory(){
				if(this.historyKeys.length != 0)
				this.$refs.alertDialog.open();
			},
			//清空记录
			dialogConfirm(){
				this.historyKeys = [];
				uni.setStorageSync('historyKeys',JSON.stringify([]));
				this.hidden = true;
			},
			//获取热度搜索关键字
			getHotKeywords(){
				getHotKeywords().then(res => {
					this.hotKeywords = res.data.data;
				})
			},
			//点击历史记录再搜索框赋值
			clickKeyword(searchKeywords){
				this.keyword = searchKeywords;
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{
		padding: 0;
		margin: 0;
	}
	page{
		background-color: #ffffff;
	}
	.box{
		width: 95%;
		padding: 2% 0%;
		margin: 0 auto;
	}
	.left{
		float: left;
	}
	.right{
		float: right;
	}
	.history_search{
		width: 100%;
		margin-top: 5%;
		overflow: hidden;
		color: #959595;
	}
	.icon_img{
		width: 22px;
		height: 22px;
		padding-right: 5px;
	}
	.history_keys{
		color: rgba($color: #000000, $alpha: 0.6);
		display: inline-block;
		padding: 2% 4%;
		background-color: rgba($color: #959595, $alpha: 0.2);
		margin-bottom: 2%;
		margin-left: 1%;
		margin-right: 2%;
	}
	.hot_search{
		width: 100%;
		margin-top: 5%;
		color: #959595;
	}
	.no_search{
		font-size: 17px;
		text-align: center;
		height: 70px;
		line-height: 70px;
	}
</style>
